<template>
  <div class="homefooter">
    <!-- 碳排放构成 -->
    <div class="footlittle">
      <div class="title">碳排放构成</div>
      <div class="goucheng">
        <div class="yonghu arryonghu" ref="arryonghu"></div>
        <div class="yonghu arrmonth" ref="arrmonth"></div>
      </div>
    </div>
    <!-- 用电量排名 -->
    <div class="footlittle">
      <div class="fuhequshi">
          <div class="title">用电量排名</div>
          <div>
            <el-radio-group v-model="radio4" size="mini" @change="getpaiming">
              <el-radio-button label="1">日</el-radio-button>
              <el-radio-button label="2">月</el-radio-button>
              <el-radio-button label="3">年</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="paiming" ref="paiming"></div>
    </div>
    <!-- 用能异常 -->
    <div class="footlittle yichang">
      <div class="title">用能异常</div>
      <div class="fenkai">
        <div class="xuanfu">
          <div class="leijihezi">
            <div class="leijige">
              <div class="danwei">累计(个)</div>
              <div class="blue">{{ entityval.total }}</div>
            </div>
          </div>
          <div class="leijihezi">
            <div class="weichuli">
              <div class="danwei">未处理(个)</div>
              <div class="blue">{{entityval.unhandled}}</div>
            </div>
          </div>
        </div>
        <div class="yichnagbox" ref="yichnagbox"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {getyongliangpaiapi,getyonghuyongdianapi,getmonthgouchengapi,getyongnnegyiapi} from '@/api/energy-consumption/GeneralSituation/HomePage'
import * as echarts from 'echarts';
export default {
  name: 'CallPoliceFooter',

  data() {
    return {
      radio4: '1',
      entityval:{},
      colorlist:['#1a90fe','#16ccc0','#66cbff','#f2d649','#91cc75','#ee6666','#ea7ccc','#9a60b4','#fc8452','#3ba272','#fac858','#5470c6']
    };
  },

  mounted() {
    this.getyichang()
    this.getpaiming()
    this.getgouchengyonghu()
    this.getgouchnegmonth()
  },

  methods: {
    async getyichang() {
      var chartDom = this.$refs.yichnagbox
      var myChart = echarts.init(chartDom);
      const { data: { entity } } = await getyongnnegyiapi()
      this.entityval=entity
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '0%',
          orient: 'vertical',
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            fontSize:10
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '80%'],
            center:['40%','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: entity.hourUsageOverLimit, name: '小时用量越上限' },
              { value: entity.hourUsageOverUpperLimit, name: '小时用量越上上限' },
              { value: entity.dayUsageOverLimit, name: '日用量越上限' },
              { value: entity.dayUsageOverUpperLimit, name: '日用量越上上限' }
            ]
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 用电量排名
    async getpaiming() {
      var chartDom = this.$refs.paiming
      var myChart = echarts.init(chartDom);
      var option;
      const { data: { list } } = await getyongliangpaiapi({ dateType: this.radio4 })
      const timePoints=list.map(ele=>ele.timeReading)
      const data=list.map(ele=>ele.valueReading)
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(kWh)',
            axisLine: {
              show: true,
            },
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            data: data,
            itemStyle: {
              color:'#1a90fe'
            }
          },
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 用户用电量构成
    async getgouchengyonghu() {
      var chartDom = this.$refs.arryonghu
      var myChart = echarts.init(chartDom);
      var option;
      const { data: { list } } = await getyonghuyongdianapi()
      const data = list.map(ele => {
        return {
          value: ele.valueReading,
          name: ele.timeReading
        }
      })
      option = {
        tooltip: {
          trigger: 'item'
        },
        color:this.colorlist,
        legend: {
          top: 'center',
          right: '0%',
          orient: 'vertical',
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            fontSize:10
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            center:['35%','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:data
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 月份用电量构成
    async getgouchnegmonth() {
      var chartDom = this.$refs.arrmonth
      var myChart = echarts.init(chartDom);
      var option;
      const { data: { list } } = await getmonthgouchengapi()
      const data = list.map(ele => {
        return {
          value: ele.valueReading,
          name: ele.timeReading
        }
      })
      option = {
        tooltip: {
          trigger: 'item'
        },
        color:this.colorlist,
        legend: {
          top: 'center',
          right: '0%',
          orient: 'vertical',
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            fontSize:10
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            center:['35%','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:data
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
};
</script>

<style scoped>
.homefooter{
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    justify-content: space-between;
  .footlittle{
    background-color: #fff;
    padding: 15px;
    .fuhequshi{
        display: flex;
        justify-content: space-between;
      }
      .title{
        font-weight: bold;
        font-size: 16px;
        color: #323232;
      }
      .paiming{
        height: 90%;
      }
      .goucheng{
        height: 90%;
        display: flex;
        .yonghu{
          width: 50%;
        }
      }
  }
  .yichang{
      
      .fenkai{
        display: flex;
        height: 90%;
      }

      .xuanfu{
        width: 30%;
        .leijihezi{
          height: 50%;
          display: flex;
          align-items: center;
          padding-left: 15px;
          .weichuli{
          width: 120px;
          height: 62px;
          background-image: url('../../../../assets/energy-consumption/GeneralSituation/weichuli.png');
          filter: drop-shadow(rgba(0, 0, 0, .15) 3px 6px 6px);
          background-color: #fff;
          .danwei{
            font-size: 14px;
            color: #646464;
            padding: 5px;
          }
          .blue{
            text-align: center;
            font-size: 18px;
            color: #E72F2B;
          }
        }
        .leijige{
          width: 120px;
          height: 62px;
          background-image: url('../../../../assets/energy-consumption/GeneralSituation/leiji.png');
          filter: drop-shadow(rgba(0, 0, 0, .15) 3px 6px 6px);
          background-color: #fff;
          .danwei{
            font-size: 14px;
            color: #646464;
            padding: 5px;
          }
          .blue{
            text-align: center;
            font-size: 18px;
            color: #1A90FE;
          }
        }
        }

      }
      .yichnagbox{
        flex:1;
      }
    }
}
</style>